<template>
    <el-form label-width="110px" :model="dataForm">
        <div class="account-info">
            <div style="display: flex;">
                <span style="font-size: 14px;font-weight: 600;">账号信息</span>
                <span style="font-size: 13px;margin-left: 10px;color: rgba(168, 171, 178, 1);">如需变更账号信息，请联系您的顾问</span>
            </div>
        </div>
        <div class="company-name">
            <el-text>{{ dataForm.company }}</el-text>
        </div>
        <div class="company-info">
            <div class="info-item">
                <span class="label">企业类型：</span>
                <span class="value">{{ dataForm.companyNature}}</span>
            </div>
            <div class="info-item">
                <span class="label">可售区域：</span>
                <span class="value">{{ dataForm.serviceArea}}</span>
            </div>
        </div>
        <div class="license-section">
            <h3>营业执照</h3>
            <img :src="dataForm.license" alt="营业执照" class="license-img">
        </div>
        <div class="qualification-section">
            <h3>行业资质</h3>
<!--            <div class="brand-logos">
                <span>经营品牌</span>
                <img v-for="brand in dataForm.brandList" :src="brand.imgUrl" :alt="brand.brandName" class="brand-logo">
            </div>-->
          <div class="brand-logos">
            <span>经营品牌</span>
            <div v-for="brand in dataForm.brandList" class="brand-item" style="display: flex;align-items: center;">
              <div style="display: flex;align-items: center;">
                <img :src="brand.imgUrl" :alt="brand.brandName" class="brand-logo">
                <div class="brand-name" >{{ brand.brandName }}</div>
              </div>
            </div>
          </div>
            <div class="certificates">
                   <span>行业资质</span>
                <img v-for="url in dataForm.aptitudeImgs?.split(',')" :src="url" class="certificate-img">
            </div>
        </div>
        <div class="contact-info">
            <h3>联系信息</h3>
            <div class="info-item">
                <span class="label">手机号</span>
                <span class="value">{{ dataForm.phone}}</span>
            </div>
            <div class="info-item">
                <span class="label">姓名</span>
                <span class="value">{{ dataForm.userName}}</span>
            </div>
            <div class="info-item">
                <span class="label">昵称</span>
                <span class="value">{{ dataForm.nickName}}</span>
            </div>
            <div class="info-item">
                <span class="label">职位</span>
                <span class="value">{{ dataForm.position}}</span>
            </div>
        </div>
    </el-form>
  <!-- 企业认证弹窗 -->
  <CompanyAuthDialog />
</template>
<script lang="ts" setup>
import baseService from "@/service/baseService";
import { ElMessage } from "element-plus"
import { nextTick, reactive, ref, toRefs, watch } from "vue";
import { useI18n } from "vue-i18n";
import CompanyAuthDialog from "@/components/CompanyAuthDialog.vue";

const { t } = useI18n();
const emit = defineEmits(["refreshDataList"]);


const dataFormRef = ref();
const dataForm = reactive({
    id: "",
    name: "",
    company: "",
    companyNature: "",
    serviceArea: "",
    license: "",
    brandList: [],
    aptitudeImgs: "",
    nickName: "",
    phone: "",
    userName: "",
    position: ""
});
const getAccountInfo = () => {
  baseService.get('/noc/nocuser/accountInfo').then(res => {
    if (res && res.code === 0) {
      Object.assign(dataForm, res.data);
    } else {
      ElMessage.error(res.msg);
    }
  });
};

getAccountInfo();
</script>


<style lang="scss" scoped>
.container {
    width: 97%;
    margin: 0 auto;
    padding: 20px;
}

h3 {
    font-weight: 600;
    margin-bottom: 20px;
}


.company-name {
    margin: 20px 0px 20px 0px;
    width: 359px;
    height: 32px;
    line-height: 32px;
    opacity: 1;
    background: rgba(228, 242, 255, 1);
}

.company-name .el-text {
    padding-left: 5px;
    font-size: 14px;
    font-weight: 600;

    color: rgba(56, 56, 56, 1);
}


.license-section,
.qualification-section,
.account-info,
.contact-info {
    margin-bottom: 20px;
}

.certificates{
    display: flex;
}
.certificates span{
    margin-right: 20px;
}

.license-img,
.certificate-img {
    max-width: 200px;
    margin-right: 20px;
    margin-bottom: 10px;
}

.brand-logos {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.brand-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
}


.info-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.label {
    width: 80px;
    /* 标签宽度，可调整 */
    color: #333;
}

.value {
    color: #666;
}
</style>
